<template>
  <h1>学生信息</h1>
  <StudentInfo />
  <h4>及格人数：{{ passSummary }}</h4>
  <h4>及格率：{{ passRate }}</h4>
</template>

<script setup>

  import { computed, onMounted, ref } from 'vue';
  import StudentInfo from './StudentInfo.vue';
  const studentInfoList = ref([])


   const passSummary = computed(() => {
    return studentInfoList.value.filter(item => item.score >= 60).length
  })

  const passRate = computed(() => {
    return studentInfoList.value.filter(item => item.score >= 60).length / 
      studentInfoList.value.length * 100 + '%'
  })

</script>
<style>

  h4 {
    text-align: left;
  }
</style>